ホームページは基本的にHTMLで記述されています。HTMLはシンプルに文字の飾りや大きさを設定できるメリットがありますが、行間などを設定することが出来ません。しかし、スタイルシートを利用することで、細かなレイアウト設定が可能になります。今回は、レイアウトを自在にあやつるスタイルシートの利用方法をご紹介いたしましょう。

→
 
HTMLでは<font size>というタグを利用し、1〜7の数字でフォントサイズを指定します。しかし、ブラウザ側で「文字の大きさ」を変更させてしまうと、どうしてもレイアウトが狂ってしまいます。そんなときは、以下のスタイルシートを利用して、フォントサイズを固定しましょう。
<SPAN STYLE="font-size:50pt">文字の大きさを固定</SPAN>
タグと同じ要領で、HTML内に上記コードを記述します。「50」部分がサイズを表わす数値になりますので、好みのサイズに変更します。極端に大きくしすぎると、画面からはみ出すので注意しましょう。


→
 
文字列に背景色を指定することも、スタイルシートを利用すればとても簡単に設定できます。コードは以下の通りです。
<SPAN STYLE="background:silver">色はSILVERに設定されてます</SPAN>
「silver」部分を変更することで、背景色が変わります。「red」「blue」「yellow」など、ほとんどの色が利用可能です。では、この背景色の設定と前項のフォントサイズの設定を重ねてみましょう。コードは以下のようになります。
<SPAN STYLE="background:silver;font-size:50pt">背景色と文字サイズが設定されてます</SPAN>
「font-size:50pt」と「background:silver」の2つの設定を「；」でつなげることで、複数の設定を重ねることができます。


→
 
びっちりと詰まった文字列で長文を読むのはなかなか疲れるものがあります。そんな時は、文字列の行間を広げるととても読みやすくなります。行間を指定するスタイルシートは以下の通りです。
<STYLE TYPE="text/css">
<!--
BODY { line-height: 200% }
-->
</STYLE>
上記コードを、HTMLの任意の場所に設置することで、ページ全体の行間を指定できます。「200」の数値を変更することで行間の広さを調整できます。


→
 
今回はタグ内に直接設定するスタイルシートをご紹介いたしました。他にも、<head>タグ内や、外部ファイルに記述することもでき、高度なレイアウトを実現するためには欠かせない機能になります。しかし、HTMLに比べ、汎用性が低く、最悪読むことが出来ないほどにレイアウトが崩れる事もあります。特に以下の３点に注意しましょう。
  • NN3.0はスタイルシートをサポートしていない
  • IEとNN、MacとWindowsで見栄えが大きく変わる
  • 同じブラウザでも、バージョンが異なると見栄えが変わる
さらにスタイルシートは、「pt」などの単位で、大きさを固定することができます。自分のパソコンでは綺麗に見えても、相手のパソコンで同じように見えるとは限りません。今回ご紹介した機能はIE5以上で動作確認を行なっています。スタイルシートを利用する際は、いろいろな環境で動作確認するように心がけましょう。

�y�V���o�C��[UNLIMIT��������1�~] EC�i�r���|�C���� Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I


�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� �����������O�~�y�������������z �C�O���s�����������I �C�O�z�e��